<ion-header  class="nav-header">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button (click)="backClick()">
        <ion-icon class="md-arrow-back"  ios="md-arrow-back"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>交易记录</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content class="content">
  <div class="tran-header">
    <ion-grid class="tran-money-select">
      <ion-row class="tran-money">
        <ion-col size="4" align-self-center>
          <label>可用余额</label><br /><br />
          <label class="t-m-val">{{credit2}}</label>
        </ion-col>
        <ion-col size="4" align-self-center>
          <label>未结金额</label><br /><br />
          <label class="t-m-val">{{credit_expend3}}</label>
        </ion-col>
        <ion-col size="4" align-self-center>
          <label>账户总额</label><br /><br />
          <label class="t-m-val">{{credit_total}}</label>
        </ion-col>
      </ion-row>
      <ion-row class="tran-type-select">
        <ion-col size="3" align-self-center  [ngClass]="{'active':selectType=='all'}" (click)="onSelectType('all')">
          <label>全部</label>
        </ion-col>
        <ion-col size="3" align-self-center [ngClass]="{'active':selectType=='1'}"  (click)="onSelectType('1')">
          <label>存款</label>
        </ion-col>
        <ion-col size="3" align-self-center [ngClass]="{'active':selectType=='2'}"  (click)="onSelectType('2')">
          <label>取款</label>
        </ion-col>
        <ion-col size="3" align-self-center [ngClass]="{'active':selectType=='3'}"  (click)="onSelectType('3')">
          <label>转账</label>
        </ion-col>
      </ion-row>
    </ion-grid>
    <div class="tran-select">
       <span [ngClass]="{'select':timeType=='1'}"  (click)="onSelectTime('1')">今天</span>  
       <span [ngClass]="{'select':timeType=='2'}" (click)="onSelectTime('2')">昨天</span>
       <span [ngClass]="{'select':timeType=='3'}" (click)="onSelectTime('3')">近7天</span>
       <span [ngClass]="{'select':timeType=='4'}" (click)="onSelectTime('4')">近15天</span>
       <span [ngClass]="{'select':timeType=='self'}" (click)="onSelectTime('self')">自选</span>
      
    </div>
  </div>
  <ion-list class="list-contain" *ngIf="!(listData | empty)">
    <ion-item *ngFor="let item of listData" lines="full" (click)="selectDetail(item.signid)">
      <ion-label>
        <h2>{{item.typeName}}</h2>
        <p *ngIf="item.cash | empty">(0元)</p>
        <p *ngIf="!(item.cash | empty)">({{item.cash | decimal}}元)</p>
      </ion-label>
      <!-- <ion-note slot="end" *ngIf="item.createds | empty">0000-00-00</ion-note> -->
      <ion-note slot="end" *ngIf="!(item.createds | empty)">{{item.createds  | datestr}}</ion-note>
    </ion-item>
  </ion-list>
  <ion-list class="list-contain" *ngIf="(listData | empty)">
    <ion-item lines="full">
      <ion-label class="no-data">
        暂无数据
      </ion-label>
    </ion-item>
  </ion-list>
</ion-content>
<app-tab-self></app-tab-self>